import React, { Fragment, CSSProperties, useEffect } from 'react'
import { Carousel } from 'antd'
import { IDraggable } from '../../../../dnd/component_type'

export default function CarouselPreview (props: IDraggable) {
  const { config, data, meta } = props

  const contentStyle: CSSProperties = {
    height: config.style.height,
    lineHeight: config.style.height,
    width: config.style.width,
    textAlign: 'center',
    color: '#fff',
    background: '#364d79',
  };

  useEffect(() => {
    console.log('轮播图配置变了~', config)
  }, [config])

  useEffect(() => {
    console.log('轮播图数据变了~', data)
  }, [data])

  return (
    <Fragment>
      <Carousel { ...config.attr } >
        {
          data.raw.list.length > 0
          ?
          data.raw.list.map((item: any, index: number) => {
            return (
              <div key={index}>
                <img src={item.url} style={ contentStyle } alt="" />
              </div>
            )
          })
          :
          <>
          <div>
            <h3 style={ contentStyle } >1</h3>
          </div>
          <div>
            <h3 style={ contentStyle } >2</h3>
          </div>
          <div>
            <h3 style={ contentStyle } >3</h3>
          </div>
          </>
        }
      </Carousel>
    </Fragment>
  )
}